<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="test">
        <test-slot >
            <h3 slot="right">{{name}}</h3>
            <p slot="left">Something bad happened.</p>
            <p slot="lislot" slot-scope="{d}">{{d}}</p>
        </test-slot>
        <test-slot2></test-slot2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let obj = {};
        Vue.component("test-slot", {
            // 插槽允许有默认内容
            template:
                `<div>
                    <slot name='right'>更新</slot>
                    <strong>Error!</strong>
                    <slot name='left'>更新</slot>
                    <ul>
                        <li v-for="d in data">
                            <slot name="lislot" :d="d" :click=>{{d}}</slot>
                        </li>
                    </ul>
                </div>
               `,
            data: function () {
                return {
                    data: ['张三','李四','王五']
                }
            },
            created(){
                obj.A = this;
            },
            method:{
                handleClick(){
                    
                }
            }
        });
        Vue.component("test-slot2", {
            // 插槽允许有默认内容
            template:
                `<div>
                    <slot name='right'>更新</slot>
                    <strong>Error!</strong>
                    <slot name='left'>更新</slot>
                    <ul>
                        <li v-for="d in data">
                            <slot name="lislot" :d="d" :click=>{{d}}</slot>
                        </li>
                    </ul>
                </div>
               `,
            data: function () {
                return {
                    data: ['张三','李四','王五']
                }
            },
            created(){
                obj.B= this;
            },
            method:{
                handleClick(){
                    
                }
            }
        });

        new Vue({
            el: "#test",
            data: { name: "500 error" }
        });
        setTimeout(() => {
            console.log(obj.A === obj.B);
            console.log(obj.A);
            console.log(obj.B);
        }, 1000);
    </script>
</body>


</html>